<template>
  <mt-navbar title="佣金提现" title-width="440rpx">
    <template #right>
      <view class="flex items-center" @click="goHistory">
        <uv-icon name="clock" color="#727687" size="32rpx"></uv-icon>
        <text class="text-24rpx text-#727687 ml-8rpx">提现记录</text>
      </view>
    </template>
  </mt-navbar>
  <view class="safety-150 pt-32rpx">
    <view class="bg-#ffffff p-32rpx">
      <view class="text-32rpx text-#1C213E font-bold">提现金额</view>
      <view class="mt-54rpx pl-60rpx h-30rpx">
        <view v-show="modelForm.withdrawAmount > 0" class="flex items-center">
          <view class="w-2rpx h-26rpx bg-#727687 mr-16rpx"></view>
          <text class="text-28rpx text-#727687">{{ withdrawUnit }}</text>
        </view>
      </view>
      <view class="ipt-box">
        <input
          v-model="modelForm.withdrawAmount"
          maxlength="10"
          class="ipt"
          type="number"
          :placeholder="'可提现佣金￥' + amountTransfer(userInfo.commissionAmount, 2, true)"
        />
        <text class="unit">￥</text>
        <text class="btn" @click="handleAll">全部提现</text>
      </view>
      <!-- <view class="text-28rpx text-#727687 mt-24rpx">
        <view v-if="modelForm.withdrawAmount <= 0">手续费每笔2%，提现后立即到账</view>
        <view v-else>
          <view class="flex items-center justify-between">
            <text>到账金额</text>
            <text class="text-#1C213E">￥{{ round(subtract(modelForm.withdrawAmount, proceAmount), 2) }}</text>
          </view>
          <view class="flex items-center justify-between">
            <text>手续费</text>
            <text class="text-#1C213E">￥{{ proceAmount }}</text>
          </view>
        </view>
      </view> -->
    </view>
    <view class="flex items-center bg-#ffffff mt-24rpx px-32rpx py-32rpx" @click="openAccountPopup">
      <view>
        <text class="text-28rpx text-#F94B4A mr-8rpx">*</text>
        <text class="text-28rpx text-#727687">收款账户：</text>
      </view>
      <view class="flex-1 min-w-0 mr-24rpx px-20rpx">
        <text v-if="modelForm.withdrawAccountId" class="text-28rpx text-#1A1A1A">{{ modelForm.withdrawAccountName }}</text>
        <text v-else class="text-28rpx text-#c0c4cc">请选择您要提现的账户</text>
      </view>
      <uv-icon name="arrow-right" color="#1C213E" size="28rpx"></uv-icon>
    </view>

    <view class="flex items-center justify-between px-32rpx fixed h-116rpx left-0 right-0 bottom-0 bg-#ffffff safety-2">
      <mt-button class="w-full" @click="handleSubmit">提现</mt-button>
    </view>

    <account-popup ref="accountRef" @confirm="handleAccountConfirm"></account-popup>
  </view>
</template>

<script setup>
import { withdrawalRecordaddWithdrawApprove } from '@/subCommission/api/index';
import { getProvinceInfo } from '@/api/index.js';
import { amountTransfer } from '@/utils/tools';
import { multiply, round, subtract } from 'mathjs';
import accountPopup from '@/subCommission/components/account-popup.vue';
import userStore from '@/store/user';
const user = userStore();

const modelForm = ref({
  withdrawAmount: '',
  withdrawAccountId: '',
  withdrawAccountName: ''
});

const withdrawUnit = computed(() => {
  let str = '';
  if (modelForm.value.withdrawAmount >= 100000000) {
    str = '亿';
  } else if (modelForm.value.withdrawAmount >= 10000000) {
    str = '千万';
  } else if (modelForm.value.withdrawAmount >= 1000000) {
    str = '百万';
  } else if (modelForm.value.withdrawAmount >= 100000) {
    str = '十万';
  } else if (modelForm.value.withdrawAmount >= 10000) {
    str = '万';
  } else if (modelForm.value.withdrawAmount >= 1000) {
    str = '千';
  } else if (modelForm.value.withdrawAmount >= 100) {
    str = '百';
  } else if (modelForm.value.withdrawAmount >= 10) {
    str = '十';
  } else {
    str = '元';
  }
  return str;
});

// const proceAmount = computed(() => {
//   const amount = multiply(modelForm.value.withdrawAmount, 0.02);
//   return round(amount, 2);
// });

function handleAll() {
  modelForm.value.withdrawAmount = amountTransfer(userInfo.value.commissionAmount, 2);
}

function goHistory() {
  uni.navigateTo({
    url: '/subCommission/pages/withdrawalHistory'
  });
}

const accountRef = ref();

function openAccountPopup() {
  accountRef.value.open();
}
function handleAccountConfirm(row) {
  modelForm.value.withdrawAccountId = row.id;
  modelForm.value.withdrawAccountName = row.withdrawAccountName;
}

function handleSubmit() {
  const params = JSON.parse(JSON.stringify(modelForm.value));
  params.withdrawAmount = params.withdrawAmount * 1000;
  if (!params.withdrawAmount) {
    uni.showToast({
      icon: 'none',
      title: '请输入提现金额'
    });
    return;
  }
  if (params.withdrawAmount > userInfo.value.commissionAmount) {
    uni.showToast({
      icon: 'none',
      title: '提现金额不能大于可提现金额'
    });
    return;
  }
  if (!params.withdrawAccountId) {
    uni.showToast({
      icon: 'none',
      title: '请选择提现账户'
    });
    return;
  }

  withdrawalRecordaddWithdrawApprove(params).then(() => {
    uni.showToast({
      icon: 'none',
      title: '操作成功',
      duration: 1000
    });
    setTimeout(() => {
      uni.navigateBack();
    }, 1000);
  });
}

const userInfo = ref({});
function getUserInfo() {
  getProvinceInfo().then((res) => {
    userInfo.value = res.data;
    user.setUserInfo(res.data);
  });
}

onShow(() => {
  getUserInfo();
});
</script>

<style lang="scss" scoped>
.ipt-box {
  position: relative;
  margin-top: 16rpx;
  .ipt {
    font-size: 36px;
    font-weight: bold;
    padding: 0 130rpx 0 60rpx;
    border-bottom: 2rpx solid #e6e6e6;
  }
  :deep(.uni-input-input) {
    font-size: 36px !important;
    font-weight: bold;
  }
  .unit {
    position: absolute;
    left: 0;
    bottom: 28rpx;
    font-size: 54rpx;
    font-weight: bold;
    color: #1c213e;
  }
  .btn {
    position: absolute;
    right: 0;
    bottom: 28rpx;
    font-size: 28rpx;
    color: #1484ee;
  }
}
</style>
